Ext.define('DutyList.calendar.UsersPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.userspanel',

    requires: [
        'DutyList.calendar.view.UsersGrid',
        'Ext.panel.Panel',
        'DutyList.calendar.data.Groups',
        'DutyList.calendar.data.User',
        'DutyList.calendar.form.GroupsWindow',
        'DutyList.calendar.dd.DragZonUserToCalendarPanel',
        'DutyList.calendar.data.MemoryGroupsStore'
    ],

    initComponent: function() {
        //this.frame= true,
        this.store = Ext.create('Ext.data.Store', {
            model: 'DutyList.calendar.data.Groups',
			autoLoad: false
        });
		this.store.load({
            scope: this,
            callback: function(records,success,operation){
                 console.log(records);
            }
        });
		
        this.title = 'Engineers';
        this.layout = 'border';
        this.items = [{
            region: 'north',
                tbar: [{
                    text: 'Group',
                    menu:[
                        {text: 'Add',
                        handler: this.onAddGroupClick,
                        scope: this
                        },
                        {text: 'Remove',
                        handler: this.onRemoveGroupClick,
                        scope: this
                        },
                        {text: 'Rename',
                         handler: this.onRenameGroupClick,
                         scope: this
                        }
                    ]
                }]
            },
            {
            xtype: 'usersgrid',
            id: 'gridPanel',
            region: 'center',
            //viewConfig: {
            listeners: {
                    itemcontextmenu: this.onUserContexMenuClick,

                    groupcontextmenu: this.onGroupContextMenuClick
                /*
                    cellclick: function(self, td, cellIndex, record, tr, rowIndex, e, eOpts) {
                     e.stopEvent();
                     //var sel = Ext.getCmp('gridPanel').getView().getSelectionModel().getLastSelected().get('name');
                     console.log(record.get('group'), record.get('name'));
                     //return false;
                 }           */
                },
                store: this.store

            }];
        this.callParent(arguments);

        this.addEvents({

            //добавление группы
            groupadd:true,

            //активация пользователя
            onActivateUserClick: true,

            //деактивация пользователя
            onDeactivateUserClick:true,

            //вызов контекстного меню для пользователя
            onUserContexMenuClick: true,

            //вызов контекстного меню для группы
            onGroupContextMenuClick: true,

            //добавить группу
            onAddGroupClick: true,

            //удалить группу
            onRemoveGroupClick:true,

            //переименовать группу
            onRenameGroupClick:true,

            //изменить группу для пользователя
            onChangeGroupClick: true
        });
    },


    onActivateUserClick: function(){

    },

    onDeactivateUserClick: function(){

    },

    onUserContexMenuClick: function (view, rec, node, index, e) {
        e.stopEvent();
        var userContextMenu = Ext.create('Ext.menu.Menu', {
            items: [
                {text: "Activate"},
                {text: "Deactivate"},
                {text: "Change group"}
            ]
        });
        userContextMenu.showAt(e.getXY());
        //return false;
    },

    onAddGroupClick: function(){
        this.showGroupWindow();
        this.clearMsg();
    },

    onRemoveGroupClick: function(){
        this.showGroupWindow();
    },

    onRenameGroupClick: function(){
        this.showGroupWindow();
    },

    onGroupContextMenuClick: function(view,node,group,e,eOpts){
        e.stopEvent();
        var groupContextMenu = Ext.create('Ext.menu.Menu', {
            items: [
                {text: "Remove"},
                {text: "Rename"}
            ]
        });
        groupContextMenu.showAt(e.getXY());
        console.log(group);
        return false;
    },

    onChangeGroup: function(){

    },

    showMsg: function(msg){
        Ext.fly('app-msg').update(msg).removeCls('x-hidden');
    },
    clearMsg: function(){
        Ext.fly('app-msg').update('').addCls('x-hidden');
    },

    showGroupWindow : function(){
            this.groupWin = Ext.create('DutyList.calendar.form.GroupsWindow', {
                listeners: {
                    'groupadd': {
                        fn: function(win, rec){
                            win.hide();
                            //rec.data.IsNew = false;
                            this.userStore.add(rec);
                            this.userStore.sync();
                            this.showMsg('Group '+ rec.data.name +' was added');
                        },
                        scope: this
                    },
                    'eventupdate': {
                        fn: function(win, rec){
                            win.hide();
                            rec.commit();
                            this.userStore.sync();
                            this.showMsg('User '+ rec.data.Name +' was updated');
                        },
                        scope: this
                    },
                    'eventdelete': {
                        fn: function(win, rec){
                            this.userStore.remove(rec);
                            this.userStore.sync();
                            win.hide();
                            this.showMsg('User '+ rec.data.Name +' was deleted');
                        },
                        scope: this
                    }
                }

            });
        this.groupWin.show();
    }
});
